<template>
  <div class="motai" ref="motai" @click="guan">
    <div class="bac" @click.stop>
      <div class="shang">
        <div class="cuo" @click.stop="guan">X</div>
        <img :src="shopData.pic" alt="">
        <div>
          <h2><span>￥</span>{{ shopData.price }}</h2>
          <p>已选 {{ color }} {{ size }}</p>
        </div>
      </div>
      <div class="color">
        <p>颜色</p>
        <div>
          <span><i style="background-color: #5d6768;" @click="yanse('灰色')"></i></span>
          <span><i style="background-color: #35374c;" @click="yanse('藏青')"></i></span>
          <span><i style="background-color: #252525;" @click="yanse('黑色')"></i></span>
        </div>
      </div>
      <div class="size">
        <div class="left">
          <p>尺码</p>
          <div>
            <span @click="chima('S')">165/72A(S)</span>
            <span @click="chima('M')">170/80A(M)</span>
            <span @click="chima('L')">175/88A(L)</span>
            <span @click="chima('XL')">180/96B(XL)</span>
          </div>
        </div>
        <div class="right">
          <span>查看真人试穿记录</span>
        </div>
      </div>
      <div class="buyNum">
        <p>购买数量</p>
        <div>
          <button><i class="iconfont icon-jianhao_o"></i></button>
          <input type="text" v-model.number="num">
          <button><i class="iconfont icon-zengjia"></i></button>
        </div>
      </div>
      <button>确认</button>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.motai {
  position: absolute;
  bottom: -100vh;
  left: 0;
  right: 0;
  height: 86%;
  background-color: rgba($color: #000000, $alpha: .5);
  transition: all .5s ease-in-out;


  .bac {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    color: #999;


    // font-size: 14px;
    .cuo {
      position: absolute;
      top: 10px;
      right: 10px;
    }


    .shang {
      display: flex;
      position: relative;
      height: 85px;


      img {
        position: absolute;
        top: -10px;
        width: 80px;
        height: 90px;
        margin-left: 10px;
      }


      div {
        margin-left: 100px;
        color: #999;
        font-size: 14px;


        h2 {
          color: #b90d27;
          font-size: 20px;
          line-height: 30px;


          span {
            font-weight: 400;
            font-size: 12px;
          }
        }


      }
    }


    .color {
      padding: 0 10px;


      div {
        margin: 5px 0;




        span {
          display: inline-block;
          width: 17px;
          height: 17px;
          margin-right: 10px;
          padding: 2px;
          border: 1px solid #fff;
          line-height: 0px;


          i {
            display: inline-block;
            width: 12px;
            height: 12px;
          }
        }
      }
    }


    .size {
      border-bottom: 1px solid #e9e9e9;
      border-top: 1px solid #e9e9e9;
      display: flex;
      justify-content: space-between;
      padding: 5px 10px 0;


      .left {
        width: 250px;


        div {
          width: 100%;
          margin-top: 10px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start; // 替代原先的space-between布局方式
          text-align: center;
          line-height: 30px;


          span {
            flex: 1;
            margin: 0 10px 10px 0; // 间隙为5px
            background-color: #f5f5f5;
            color: #000;
            width: calc((100% - 10px) / 4); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
            min-width: calc((100% - 10px) / 4); // 加入这两个后每个item的宽度就生效了
            max-width: calc((100% - 10px) / 3); // 加入这两个后每个item的宽度就生效了
            font-size: 12px;


            &:nth-child(3n) {
              // 去除第3n个的margin-right
              margin-right: 0;
            }
          }
        }
      }


      .right {
        font-size: 12px;
        color: #585858;
      }
    }


    .buyNum {
      padding: 5px 10px;
      display: flex;
      justify-content: space-between;


      div {


        input,
        button {
          width: 30px;
          height: 30px;
          text-align: center;
          line-height: 10px;
          font-size: 30px;
        }
      }
    }


    >button {
      width: 100%;
      background-color: #4f3127;
      color: #fff;
      line-height: 40px;
    }
  }
}
</style>